<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%
	String bathPath = request.getContextPath();
	pageContext.setAttribute("bathPath", bathPath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js" ></script>
<link rel="stylesheet" href="${bathPath}/frame/layui/css/layui.css"  media="all">
<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<link rel="stylesheet" href="${bathPath}/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="${bathPath}/layui_ext/dtree/font/dtreefont.css">
</head>
<style type="text/css"> 
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
     top: 50%;
     transform: translateY(-50%);    
}
</style>
<body>
<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="height:490px;width:910px;margin-left:20px;">
  <ul class="layui-tab-title">
    <li lay-id="22">组织机构查询</li>
  </ul>
  <div class="layui-tab-content" style="height:450px; width:910px">
    <div class="layui-tab-item layui-show" >
  <form id="myform" class="layui-form layui-form-pane">
 <div class="demoTable" style="margin-top: 60px;margin-left:30px;"> 
</div> 
</form>
<!--增加/删除  -->
<div ><%-- <span><button data-url = "${bathPath}/aDKNetGroup/index1.action" style="margin-top: -60px;"  data-id = "1" data-title = "增加组织机构" class="layui-btn site-demo-active" data-type="tabAdd">增加</button></span> --%>
<span><button  class="layui-btn site-demo-active layui-btn-sm " style="margin-top:-90px;position:relative;" onclick="zengjia()">增加</button></span> 
<span><button  class="layui-btn site-demo-active layui-btn-sm " style="margin-top:-90px;" onclick="shanchu(netid)">删除</button></span>
</div>

<!--树形  -->
<div style="height:405px;width:200px;overflow:auto; margin-top:-30px; margin-left:-20px;" id="toolbarDiv">
	<ul id="demoTree1" class="dtree" data-id="0" style="width:180px;height:400px;"></ul>
</div>
<!-- 页面 -->
<div>
<iframe id="myIframe" name="mainIframe" frameborder="0" style="width:500px;min-width:600px;height:400px;position:absolute; top:100px; left:260px;"  src="${bathPath}/aDKNetGroup/findId.action?id=1" ></iframe>
</div>
 <table class="layui-hide"  id="demo"></table>
<table class="layui-hide"  id="test"  lay-filter="test"></table>
</div>
<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
var jiedian;
var netid;
$(function(){
	
	$.ajax({
		type:"POST",
		async:false,  //默认true,异步
		url:"${bathPath}/aDKNetGroup/selectAll.action",
		//data: param,  
		success:function(data){
	      jiedian=data.data;
	      //alert(jiedian.netgroupid);
	      layui.config({
			  base: '${bathPath}/layui_ext/dtree/' //配置 layui 第三方扩展组件存放的基础目录
			}).extend({
			  dtree: 'dtree' //定义该组件模块名
			}).use(['element','layer', 'dtree'], function(){
				var layer = layui.layer,
				    dtree = layui.dtree,
				    $ = layui.$;
				dtree.render({
				  elem: "#demoTree1",  //绑定元素
				  //url:"${bathPath}/aDKNetGroup/selectAll.action",
				  data: demoData,  //数据
				  //checkbar: true,   
				  //checkbarType: "all",
				  dot: false,  //隐藏小圆点
				  toolbarScroll:"#toolbarDiv"//加滚动条
				  //defaultRequest:{nodeId:"tree.id",parentId:"tree.pId"}
				});

			        //单击节点 监听事件
			        dtree.on("node('demoTree1')" ,function(param){
				  //layer.msg(JSON.stringify(param));
				  //alert(JSON.stringify(param));
				  //alert(param.param.nodeId);
				  $("#myIframe").attr("src","${bathPath}/aDKNetGroup/findId.action?id="+param.param.nodeId);
				  netid=param.param.nodeId;
				});
			});
	    }
	});
	
	//setInterval('demoData',1000);
 var demoData  = function(){
	  var arr = [];
	/*   $.each(jiedian,function(index,bean){ 
      arr.push({
    	"id":jiedian[0].netgroupid,
  		"title": jiedian[0].netgroupname,
  		"isLast": false,
  		"level": "1",
  		"parentId": "0"
  		//"checkArr": [{"type": "0", "isChecked": "0"}],  
        //"basicData": {"data1": "自定义数据111", "data2": "自定义数据222", "data3": "自定义'我带了单引号'333"}
      });
	  });   */
	  
   arr.push({
	    	"id":jiedian[0].netgroupid,
	  		"title": jiedian[0].netgroupname,
	  		"isLast": false,
	  		"level": "1",
	  		//"checkArr": [{"type": "0", "isChecked": "0"}],
	  		//"checkArr": [{"type": "0", "isChecked": "0"}],  
	        //"basicData": {"data1": "自定义数据111", "data2": "自定义数据222", "data3": "自定义'我带了单引号'333"}
	      });  
	  
	  arr[0].children=function(){
          var arr = [];
        $.each(jiedian,function(index,bean){ 
        if(index>0){
             arr.push({
     	    	"id":bean.netgroupid,
    	  		"title": bean.netgroupname,
    	  		"isLast": true,
    	  		"level": "2",
    	  		//"checkArr": [{"type": "0", "isChecked": "0"}],
	            });
         }
          }); 
          return arr;
      }();
    return arr;
 }();
 
}); 

//增加部门弹出框
function zengjia(){
	parent.layer.open({
		  title:'增加组织机构',
		  type: 2,
		  area:['451px', '400px'],
		  offset:['230px','550px'],
		  content: '${bathPath}/aDKNetGroup/index1.action',
		  success:function(layero,index){
			  layer.iframeAuto(index);
		  },
		  end: function () {
			  location.reload();
			  }
		  }); 
}

//删除组织机构	
function shanchu(netid){
	var param=$("form").serialize();
	$.ajax({
		type:"POST",
		async:false,
		dataType:"text",
		data:param,
		url:"${bathPath}/aDKNetGroup/deleteNetGroup.action?id="+netid,
		success:function(data){
			parent.layer.confirm("是否要删除？", {btn: ['是', '否'], title: "提示"}, function(){
				/* layer.close(layer.index);
				location.reload();  */
				parent.layer.close(parent.layer.index);
				location.reload();
				});
			},
		end: function () {
			location.reload();
		}
	});
}

</script>
<script>
		layui.use('element', function() {
				var $ = layui.jquery, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

				//触发事件
				var active = {
					tabAdd : function() {
						//console.log(url);
						//新增一个Tab项
						element.tabAdd('demo', {
							title : $(this).attr("data-title"), //用于演示
							
							content : '<iframe data-frameid="'+$(this).attr("data-id")+'" scrolling="auto" frameborder="0" src="'+$(this).attr("data-url")+'" style="width:1220px;height:650px;"></iframe>' ,
							id : $(this).attr("data-id")
						//实际使用一般是规定好的id，这里以时间戳模拟下
						})
						var id = $(this).attr("data-id");
						
						element.tabChange('demo', id); //切换到：用户管理
		                $("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id + "']").attr("src"))//切换后刷新框架
					   
					},
					tabDelete : function(othis) {
						//删除指定Tab项
						element.tabDelete('demo', '44'); //删除：“商品管理”

						othis.addClass('layui-btn-disabled');
					},
					tabChange : function() {
						//切换到指定Tab项
						element.tabChange('demo', '22'); //切换到：用户管理
					}
				};

				$('.site-demo-active').on('click', function() {
					var othis = $(this), type = othis.data('type');
					active[type] ? active[type].call(this, othis) : '';
				});

				//Hash地址的定位
				var layid = location.hash.replace(/^#test=/, '');
				element.tabChange('test', layid);

				element.on('tab(test)', function(elem) {
					location.hash = 'test=' + $(this).attr('lay-id');
				});

			});
	
/* 	layui.use('form', function(){
		  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
		  
		  //……
		  
		  //但是，如果你的HTML是动态生成的，自动渲染就会失效
		  //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
		  form.render();
	}) */
	</script>
	</div>
	</div>
</body>
</html>